<template>
  <div class="my-stencil" :style="style">
    <div class="button-wrapper">
      <el-upload
        :data="data"
        :before-upload="beforeUpload"
        :action="action"
        :on-success="handleAvatarSuccess"
        :show-file-list="false"
        class="avatar-uploader"
      >
        <el-image v-if="cropImage" :src="cropImage" />
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </div>
    <div class="cropper">
      <cropper
        v-if="cropImage"
        classname="cropper"
        :src="cropImage"
        :stencil-props="{
          aspectRatio: aspectRatio
        }"
        :stencil-component="stencilCoordinates"
        @change="onChange"
      />
    </div>
  </div>
</template>

<script>
import {
// PreviewResult,
// BoundingBox,
// MoveableArea,
// CircleStencil
// Cropper
} from 'vue-advanced-cropper'
import { getToken } from '@/api/qiniu'

export default {
  name: 'MyStencil',
  components: {
    // PreviewResult,
    // BoundingBox,
    // MoveableArea,
    // CircleStencil
    // Cropper
  },
  props: {
    img: {
      type: String,
      required: true
    },
    resultCoordinates: {
      type: String,
      default: 'left'
    },
    minAspectRatio: {
      type: Number,
      default: 8 / 8
    },
    maxAspectRatio: {
      type: Number,
      default: 10 / 8
    },
    stencilCoordinates: {
      type: String,
      default: 'CircleStencil'
    },
    aspectRatio: {
      type: Number,
      default: 10 / 12
    },
    stencilProps: {
      type: Object,
      default() {
        return {}
      }
    },
    classes: {
      type: Object,
      default() {
        return {
          preview: 'preview'
        }
      }
    }
  },
  data() {
    return {
      data: {
        token: '',
        type: 1 // 上传类型
      },
      action: '',
      imageUrl: ''
    }
  },
  computed: {
    style() {
      const { height, width, left, top } = this.stencilCoordinates
      return {
        width: `${width}px`,
        height: `${height}px`,
        left: `${left}px`,
        top: `${top}px`
      }
    },
    cropImage() {
      return this.img || this.imageUrl
    }
  },
  methods: {
    onMove(moveEvent) {
      this.$emit('move', moveEvent)
    },
    onChange(resizeEvent) {
      this.$emit('onChange', resizeEvent)
    },
    aspectRatios() {
      return {
        minimum: this.aspectRatio || this.minAspectRatio,
        maximum: this.aspectRatio || this.maxAspectRatio
      }
    },
    async beforeUpload(file) {
      // file.name = createUniqueString()
      const { status, token, upload } = await getToken()
      if (status) {
        this.action = upload
        this.data.token = token
      }
    },
    handleAvatarSuccess(res, file) {
      const { data } = res
      this.imageUrl = data.url
      console.log(this.cropImage)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-stencil{
  display: flex;
  flex-direction: row;

}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
